﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, user-scalable=no" name="viewport"/>
    <meta content="telephone=no" name="format-detection"/>
    <title></title>
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
    <style>

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .left_right {
            width: 100%;
            overflow: hidden;
            font-size: 4.5vw;
            text-align: center;
            line-height: 12vw;
            background-color: #f8f8f8;
        }

        .left_right .left {
            float: left;
            width: 100%;
        }

        .left_content {
            overflow: hidden
        }

        .left_content .content_div {
            overflow: hidden;
            float: left;
            margin-bottom: 7%;
        }

        .left_content .content_div .content_div_title {
            text-align: center;
            font-size: 4vw;
            margin-top: 20px;
            height: 25px;
            color: #606060;
        }

        .left_content .content_div .content_div_pie {
            width: 25vw;
            height: 35vw;
        }


    </style>
    <script>
        window.onload = function () {
            var content = '[{\"UserName\":\"十三\",\"UserSalesMoney\":1644.65,\"TerminalNum\":4.0,\"ProductSaleList\":[{\"ProductType\":\"QQ星有机奶\",\"ProductSalesMoney\":250.0},{\"ProductType\":\"安慕希\",\"ProductSalesMoney\":483.15},{\"ProductType\":\"儿童花色奶\",\"ProductSalesMoney\":125.0},{\"ProductType\":\"谷粒多\",\"ProductSalesMoney\":96.0},{\"ProductType\":\"金典\",\"ProductSalesMoney\":464.0},{\"ProductType\":\"基础优酸乳\",\"ProductSalesMoney\":85.0},{\"ProductType\":\"味可滋\",\"ProductSalesMoney\":27.0},{\"ProductType\":\"砖优酸乳\",\"ProductSalesMoney\":114.5}]},{\"UserName\":\"苗淼淼\",\"UserSalesMoney\":1598.98,\"TerminalNum\":2.0,\"ProductSaleList\":[{\"ProductType\":\"安慕希\",\"ProductSalesMoney\":253.98},{\"ProductType\":\"儿童成长奶\",\"ProductSalesMoney\":150.0},{\"ProductType\":\"谷粒多\",\"ProductSalesMoney\":240.0},{\"ProductType\":\"基础优酸乳\",\"ProductSalesMoney\":265.0},{\"ProductType\":\"金典\",\"ProductSalesMoney\":522.0},{\"ProductType\":\"味可滋\",\"ProductSalesMoney\":168.0}]}]';
            JavaCallJs(content);
        }


    </script>
</head>
<body>
<div class="left_content" id="leftId"></div>
</body>
<script type="text/javascript">
    function JavaCallJs(content) {

        //设置左边图表数据
        $("#leftId").empty();
        var div = document.createElement("div");
        div.id = "newDivLeft";
        div.className = 'content_div';
        div.style.width = document.documentElement.clientWidth + 'px';

        //图表标题div
        <!--        var div1 = document.createElement("div");-->
        <!--        div1.id = "new1DivLeft";-->
        <!--        div1.className = 'content_div_title';-->
        <!--        div1.innerHTML = "当月产品销量";-->
        <!--        div1.style.fontSize = "larger";-->
        <!--        div1.style.color = "black";-->
        <!--        div.appendChild(div1);-->

        //图表div
        var div2 = document.createElement("div");
        div2.id = "new2DivLeft";
        div2.className = 'content_div_pie';
        div2.style.width = document.documentElement.clientWidth + 'px';
        div2.style.height = document.documentElement.clientHeight + 'px';
        div.appendChild(div2);

        //设置圆形图表
        setChart(content, div2);
        $("#leftId").append(div);
    }

    function setChart(item, div) {
        var myChart = echarts.init(div);
        var json = JSON.parse(item);

        var legendNameSet = new Set();
        var legendName = new Set();
        var series = new Array();
        var yAxisData = [];
        var bgData = []


        for (var i = 0; i < json.length; i++) {
            yAxisData.push(json[i].UserName);
            var sum = 0
            for (var j = 0; j < json[i].ProductSaleList.length; j++) {
                legendNameSet.add(json[i].ProductSaleList[j].ProductType)
                sum = sum + parseInt(json[i].ProductSaleList[j].Num)
            }
            bgData.push(sum)
        }
        console.log(legendNameSet)
        legendName = Array.from(legendNameSet);
        for (i = 0; i < legendName.length; i++) {
            var serie = {};
            serie.data = [];
            serie.label = {};
            serie.emphasis = {};
            var serieData = [];

            for (var j = 0; j < json.length; j++) {
                var isAllHas = false;
                for (var k = 0; k < json[j].ProductSaleList.length; k++) {
                    if (legendName[i] === json[j].ProductSaleList[k].ProductType) {
                        isAllHas = true;
                        if (json[j].ProductSaleList[k].Num > 0) {
                            serieData.push(parseInt(json[j].ProductSaleList[k].Num))
                        } else {
                            serieData.push(0);
                        }
                    }
                }
                if (!isAllHas) {
                    serieData.push(0);
                }

            }
            serie.name = legendName[i];
            serie.type = 'bar';
            serie.stack = 'total';
            serie.label.show = false;
            serie.label.formatter = function (params) {
                if (params.value > 0) {
                    return params.value;
                } else {
                    return '';
                }
            }
            serie.emphasis.focus = 'series';
            serie.barWidth = 36;
            serie.data = serieData;
            serie.data.sort(function (a, b) {
                return a.value - b.value;
            });

            series.push(serie)
        }

        var serie = {}
        serie.name
        serie.type = {}
        serie.barWidth = {}
        serie.z = {}
        serie.barGap = {}
        serie.color = {}
        serie.data = []
        serie.itemStyle = {}
        serie.itemStyle.normal = {}
        serie.itemStyle.normal.label = {}
        serie.itemStyle.normal.label.formatter = {}
        serie.itemStyle.normal.label.show = {} //开启显示
        serie.itemStyle.normal.label.position = {} //在上方显示
        serie.itemStyle.normal.label.textStyle = {}
        serie.itemStyle.normal.label.textStyle.color = {}
        serie.itemStyle.normal.label.textStyle.fontSize = {}

        serie.name = '总计'
        serie.type = 'bar'
        serie.barWidth = 36
        serie.z = "-1"
        serie.barGap = '-100%'
        serie.color = '#000'
        serie.data = bgData
        serie.itemStyle.normal.label.show = true //开启显示
        serie.itemStyle.normal.label.formatter = '{c}'
        serie.itemStyle.normal.label.position = 'right' //在上方显示
        serie.itemStyle.normal.label.textStyle.color = '#000'
        serie.itemStyle.normal.label.textStyle.fontSize = 10
        series.push(serie)

        var option = {
            color: [
                '#91cc75', '#fac858', '#c99979', '#73c0de',
                '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc',
                '#54211d', '#f15a22', '#ffe600', '#228fbd',
                '#b54334', '#6f60aa', '#ea66a6', '#40835e',
                '#7FFF00', '#FF1493', '#8A2BE2', '#006400',
                '#00CED1', '#FFF0F5', '#2E8B57', '#808000',
                '#800080', '#DDA0DD', '#32CD32', '#F4F5F0',
                '#6D7057',  '#F0E68C','#CCFF33',  '#FF0000',
            ],

            grid: {
                left: 0,
                top: 0,
                right: '12%',
                bottom: 0,
                containLabel: 'true'
            },
            tooltip: {
                trigger: 'axis',
                confine: true,
                textStyle: {
                    fontSize: 10,
                },
                axisPointer: {            // Use axis to trigger tooltip
                    type: 'shadow'        // 'shadow' as default; can also be 'line' or 'shadow'
                },
                formatter:this.formatter
            },
            formatter (params){
                let temp=[];
                let temp2='';
                let leftSide='';
                let rightSide='';
                for( let item of params){
                    temp.push({
                        seriesName:item.seriesName,
                        value:item.value
                    })
                }
                let arr=temp.sort(this.sortValue);
                let midValue=Math.ceil(arr.length/2);
                for(let [key,item] of arr.entries()){
                    var str = "<span style='color: #ff0000'>" + params[0].name + "</span><br/>"
                    if(key< midValue&&midValue>4){
                        if(isNaN(item.value)){
                            leftSide+=params[key].marker+`${item.seriesName}: 无数据<br>`;
                        }else{
                            leftSide+=params[key].marker+`${item.seriesName}: ${item.value}<br>`;
                        }
                    }else{
                        if(isNaN(item.value)){
                            rightSide+=params[key].marker+`${item.seriesName}: 无数据<br>`;
                        }else{
                            rightSide+=params[key].marker+`${item.seriesName}: ${item.value}<br>`;
                        }
                    }
                }
                temp2=`<div class="my-flex">
            <div style="float: left">${leftSide}</div>
            <div style="float: right;margin-left: 20px;">${rightSide}</div>

            </div>`;
                return temp2;
            },
            legend: {
                show: false,
                data: Array.from(legendName),
                bottom: 0,
                selectedMode: false,
            },
            axisLabel: {
                interval: 0,
            },
            xAxis: {
                type: 'value',
                fontSize: 10,
                splitLine: {
                    show: false
                },
                axisLabel: {
                    interval: 0,//横轴信息全部显示
                    rotate: -30,//-15度角倾斜显示
                },
                axisLine: { //---坐标轴 轴线
                    show: true,
                    //---是否显示
                    //------------------- 箭头 -------------------------
                    symbol: ['none', 'arrow'],
                    //---是否显示轴线箭头
                    symbolSize: [8, 24],
                    //---箭头大小
                    symbolOffset: [0, 16],
                    //---箭头位置
                    //------------------- 线 -------------------------
                    lineStyle: {
                        color: '#3366CC',
                        width: 1,
                        type: 'solid',
                    },
                },

            },
            yAxis: {
                type: 'category',
                fontSize: 10,
                data: yAxisData.map(function (name) {
                    var strs = name.split(''); //字符串数组
                    var str = ''
                    for (var i = 0, s; s = strs[i++];) { //遍历字符串数组
                        str += s;
                        if (!(i % 4)) str += '\n'; //按需要求余
                    }
                    return str
                }),
                axisLine: { //---坐标轴 轴线
                    show: true,

                    //------------------- 线 -------------------------
                    lineStyle: {
                        color: '#3366CC',
                        width: 1,
                        type: 'solid',
                    },
                },
            },
            series: series
        }
        myChart.setOption(option);
    }
</script>
</html>